import React from 'react';
import ReactDom from 'react-dom';

import { observable, action, computed } from 'mobx';

import { PropTypes } from 'prop-types';

import { PropTypes as ObservablePropTypes, observer } from 'mobx-react';


class Todo {
    id = Math.random();
    @observable title = "";
    @observable finished = false;

    constructor(title) {
        this.title = title;
    }
}

class Store {
    @observable todos = [];

    @action.bound createTodo(title) {
        this.todos.push(new Todo(title));
        console.log(this.todos);
    }


}

const store = new Store();

@observer
class TodoList extends React.Component {


    constructor(props) {
        super(props);

        this.state = {
            inputValue: ''
        }
    }

    handlerSubmit = (e) => {
        e.preventDefault();

        var store = this.props.store;

        store.createTodo(this.state.inputValue);

        this.setState({
            inputValue: ""
        });
    }

    handleChange = (e) => {
        this.setState({
            inputValue: e.target.value
        })
    }

    render() {
        var store = this.props.store;
        return <div className="todo-list">
            <header>
                <form onSubmit={this.handlerSubmit}>
                    <input type="text" value={this.inputValue} onChange={this.handleChange} />
                    <button type="submit" onClick={this.handlerSubmit}>提交</button>
                </form>
            </header>
            <ul>
                {
                    store.todos.map(item => {
                        <li key={item.id}>{item.title}</li>
                    })
                }
            </ul>
            <footer>
              
            </footer>
        </div>
    }
}




ReactDom.render(<TodoList store={store} />, document.getElementById('app'));